﻿<DemoPageSectionComponent Id="Editors-TagBox-TagTemplate" ShowSizeMode="true">
    <ChildContentWithParameters Context="Params">
        @inject WorldcitiesDataService WorldcitiesDataService

        <label for="tbTagTemplate" class="demo-text cw-480 mb-1">
            Cities
        </label>
        <DxTagBox Data="@Data"
                  TextFieldName="@nameof(City.CityName)"
                  TData="City"
                  TValue="City"
                  AllowCustomTags="true"
                  @bind-Tags="@Tags"
                  ListRenderMode="ListRenderMode.Virtual"
                  SizeMode="Params.SizeMode"
                  CssClass="cw-480"
                  InputId="tbTagTemplate">
            <TagDisplayTemplate Context="tagContext">
                @{
                    var buttonStyleMode = tagContext.IsCustom ? ButtonRenderStyleMode.Contained : GetModeByID(tagContext.DataItem.CityName);
                    var buttonStyle = tagContext.IsCustom ? ButtonRenderStyle.Dark : ButtonRenderStyle.Primary;
                    <DxButton RenderStyle="@buttonStyle"
                              RenderStyleMode="@buttonStyleMode"
                              Text="@tagContext.DisplayText"
                              CssStyle="display:inline-block; padding-right: 0">
                        @context
                        <span @onclick="@tagContext.RemoveTagAction" style="display:inline-block; width: 1em; margin-left: 0.5em">
                            &times;
                        </span>
                    </DxButton>
                }
            </TagDisplayTemplate>
        </DxTagBox>
    </ChildContentWithParameters>

    @code {
        IEnumerable<City> Data { get; set; }
        IEnumerable<string> Tags { get; set; }

        protected override async Task OnInitializedAsync() {
            Data = await WorldcitiesDataService.GetCitiesAsync();
            Tags = new List<string>() { "New York", "Los Angeles", "Tokyo" };
        }

        ButtonRenderStyleMode GetModeByID(string cityName) {
            switch(cityName) {
                case "New York":
                    return ButtonRenderStyleMode.Contained;
                case "Los Angeles":
                    return ButtonRenderStyleMode.Outline;
                default:
                    return ButtonRenderStyleMode.Text;
            }
        }
    }
</DemoPageSectionComponent>
